<!DOCTYPE html>
<html>
<head>
<title>2.Babylon创建基本形状物体</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
  color: #000;
}

h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  color: #777;
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-size: 12px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #777;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
  max-width: 100%
}
</style>
</head>
<body>
<p><a href="http://doc.babylonjs.com/tutorials/Discover_Basic_Elements">原文链接</a></p>
<h1>Babylon创建基本形状物体</h1>
<h2>创建一个立方体（Box）</h2>
<pre><code>var box = BABYLON.Mesh.CreateBox(&quot;box&quot;,6.0,scene,false,BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，box尺寸，所附属的场景，是否可以更新，side orientation?)
如果要应用默认行为，后两个参数可以省略
var box = BABYLON.Mesh.CreateBox(&quot;box&quot;,6.0,scene);
</code></pre>

<p><img src="img/createBox.png" alt="image" /></p>
<h2>创建一个球体(Sphere)</h2>
<pre><code>var sphere = BABYLON.Mesh.CreateSphere(&quot;sphere&quot;, 10.0, 10.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，段的数量（数量越高，物体细节越精细），尺寸，是否可以更新,side orientation?)
</code></pre>

<p><mark>第一张图的段为1，第二张图的段为10</mark><br>
<img src="img/createSphereF1.png" alt="image" /><br><img src="img/createSphereF10.png" alt="image" /></p>
<h2>创建一个面(Plane)</h2>
<pre><code>var plane = BABYLON.Mesh.CreatePlane(&quot;plane&quot;, 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，尺寸，所附属的场景，是否可以更新，side orientation?）
</code></pre>

<p><img src="img/createPlane.png" /></p>
<h2>创建一个规则的多边形(Disc)</h2>
<pre><code>var disc = BABYLON.Mesh.CreateDisc(&quot;disc&quot;, 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，半径，设置由几条边构成，是否可以更新，side orientation?）
</code></pre>

<p><mark>第一张图的第三个参数为3，第二张图的为5<br></mark>
<img src="img/createDisc3.png" /><br><img src="img/createDisc5.png" /></p>
<h2>创建一个圆柱体(Cylinder)</h2>
<pre><code>var cylinder = BABYLON.Mesh.CreateCylinder(&quot;cylinder&quot;, 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明:
    (名称，高度,顶部直径，底部直径，设置由几条边构成，heightSubdivs？，所附属的场景，是否可以更新，side orientation?）
</code></pre>

<p><img src="img/createCylinder.png" /></p>
<h2>创建一个圆环体(Torus)</h2>
<pre><code>var torus = BABYLON.Mesh.CreateTorus(&quot;torus&quot;, 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明:
    （名称，直径，厚度，设置由几条边构成，所附属的场景，是否可以更新，side orientation?）
</code></pre>

<p><img src="img/createTorus.png" /></p>
<h2>创建一个结(Knot)</h2>
<pre><code>var knot = BABYLON.Mesh.CreateTorusKnot(&quot;knot&quot;, 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，半径，管子粗细， radialSegments, tubularSegments,p，q,所附属的场景，是否可以更新，side orientation?）
    p,q:设置结的复杂度
</code></pre>

<p><mark>第一张图的p,q参数为2,3，第二张图的为2,5<br></mark>
<img src="img/createKnotp2q3.png" /><br><img src="img/createKnotp2q5.png" /><br>
<a href="https://en.wikipedia.org/wiki/Torus_knot">想了解更多关于Knot?</a></p>
<h2>创建一个网格（Line Mesh）</h2>
<pre><code>var lines = BABYLON.Mesh.CreateLines(&quot;lines&quot;, [
    new BABYLON.Vector3(-10, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(0, 0, -10),
    new BABYLON.Vector3(0, 0, 10)
], scene);
参数说明：
    （名称，坐标数组，所依附的场景）
    坐标数组中的点，从第一个开始绘制并连接~
</code></pre>

<p><img src="img/createLine.png" /></p>
<h2>创建DashedLines Mesh</h2>
<pre><code>var dashedlines = BABYLON.Mesh.CreateDashedLines(&quot;dashedLines&quot;, [new BABYLON.Vector3(-10, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(0, 0, -10),
    new BABYLON.Vector3(0, 0, 10)], dashSize, gapSize, dashNb, scene);
参数说明：
    （名称,坐标数组, dashSize, 间隙大小, dashNumber, scene.）
</code></pre>

<p>【这没懂，官方原文如下】：</p>
<pre><code>As for Lines, a line along the vectors3 will be displayed in space. It will try to set dashNumber strokes on this line depending on the length of each segment between two successive vectors3.
dashSize and gapSize are relative to each other dash and gap sizes within these strokes.
</code></pre>

<p><img src="img/createDashLine.png" /><br>
<a href="http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#linesystem">想了解更多关于LineSystem?</a><br></p>
<h2>创建一个带</h2>
<pre><code>var ribbon = BABYLON.Mesh.CreateRibbon(&quot;ribbon&quot;, [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，路径数组，关闭数组，结束路径，偏移，所依赖的场景，是否可以更新，side orientation?）如下说明：
    name : a string, the name you want to give to your shape,
    pathArray : an array populated with paths. Paths are also arrays, populated with series of successive Vector3. You need at least one path to construct a ribbon and each path must contain at least four Vector3,
    closeArray : boolean, if true an extra set of triangles is constructed between the last path and the first path of pathArray,
    closePath : boolean, if true the last point of each path of pathArray is joined to the first point of this path,
    offset : integer (default half the path size) mandatory only if the pathArray contents only one path. The ribbon will be constructed joining each i-th point of the single path to the i+offset-th point. It is ignored if pathArray has more than one path,
    scene : the current scene object,
    updatable: boolean, if the ribbon should allow updating later,
    sideOrientation : the wanted side-orientation (BABYLON.Mesh.FRONTSIDE / BACKSIDE / DOUBLESIDE / DEFAULT).
</code></pre>

<p><a href="http://doc.babylonjs.com/tutorials/Parametric_Shapes">参数化形状</a></p>
<h2>创建一个管子</h2>
<pre><code>var tube = BABYLON.Mesh.CreateTube(&quot;tube&quot;, [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);
参数说明：
    （名称，路径，半径，段的数量，radiusFunction ，cap ，是否可以更新，side orientation?）
    name : string, the name of the tube mesh,
    path : an array of successive Vector3, at least two Vector3,
    radius : nuumber, the tube radius, used when radiusFunction parameter set to null,
    tesselation : the number of radial segments,
    radiusFunction : optional, a javascript function returns a radius value. This can be set to null,
    cap : BABYLON.Mesh.NO_CAP, BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL,
    updatable : boolean, if the tube should allow updating later,
    sideOrientation : the wanted side orientation (front, back or double side).
</code></pre>

<h1>Updatable和Side Orientation属性</h1>
<h2>Updatable</h2>
<pre><code>在每一个Mesh创建时都有的参数，设置Mesh在创建后能否更新。
如果设置为False,则Mesh数据只向GPU传送一次。
如果设置为True,则每次更新后都会重新计算并传入GPU。
</code></pre>

<h2>Side Orientation属性</h2>
<pre><code>Side Orientation是用来设置每个面的可见度或者光的反射。
有以下4种参数
    BABYLON.Mesh.FRONTSIDE(正面可见)
    BABYLON.Mesh.BACKSIDE（反面可见）
    BABYLON.Mesh.DOUBLESIDE（正反都可见）
    BABYLON.Mesh.DEFAULT（默认为正面可见）
</code></pre>

<h2>创建一个地面</h2>
<pre><code>var ground = BABYLON.Mesh.CreateGround(&quot;ground&quot;, 6, 6, 2, scene);
参数说明：
    （名称，宽度，深度，细分，所附属的场景）
</code></pre>

<p><img src="img/createGround.png" /></p>
<h2>创建一个HeightMap</h2>
<pre><code>var ground = BABYLON.Mesh.CreateGroundFromHeightMap(&quot;ground&quot;, &quot;heightmap.jpg&quot;, 200, 200, 250, 0, 10, scene, false, successCallback);
参数说明：
    （名称，图片（灰度），宽度，高度，subdivs（精细度），最小宽度，最小高度，所依赖的场景，是否可以更新,side orientation?）
</code></pre>


</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
